<!DOCTYPE html>
<html>
    <head>
        <title>ex1</title>
        <style>
            *{
                margin: 0;
                font-family: consolas, 'New Roman';
            }
            #container{
                position: relative;
                display: flex;
                justify-content: center;
                width: 300px;
                height: 300px;
            }
            .side{
                width: 28%;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
            }
            .lpin{
                display: flex;
                justify-content: center;
                border: 2px solid #16417C;
                border-right-width: 0;
                height: 6%;
                background-color: lightgray;
            }
            .rpin{
                display: flex;
                justify-content: center;
                border: 2px solid #16417C;
                border-left-width: 0;
                height: 6%;
                background-color: lightgray;
            }
            #body{
                display: flex;
                width: 40%;
                border: 2px solid #16417C;
                background-color: lightgray;
            }
            #ln{
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: flex-start;
                width: 50%;
                position: relative;
                left: 5px;
            }
            #rn{
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: flex-end;
                width: 50%;
                position: relative;
                right: 5px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="side">
                <div class="lpin" id="ip2">0</div>
                <div class="lpin" id="ip1">0</div>
                <div class="lpin" id="ip0">0</div>
            </div>
            <div id="body">
                <div id="ln">
                    <p>in2</p>
                    <p>in1</p>
                    <p>in0</p>
                </div>
                <div id="rn">
                    <p>out7</p>
                    <p>out6</p>
                    <p>out5</p>
                    <p>out4</p>
                    <p>out3</p>
                    <p>out2</p>
                    <p>out1</p>
                    <p>out0</p>
                </div>
            </div>
            <div class="side">
                <div class="rpin" id="op7">0</div>
                <div class="rpin" id="op6">0</div>
                <div class="rpin" id="op5">0</div>
                <div class="rpin" id="op4">0</div>
                <div class="rpin" id="op3">0</div>
                <div class="rpin" id="op2">0</div>
                <div class="rpin" id="op1">0</div>
                <div class="rpin" id="op0">1</div>
            </div>
        </div>
        <script type="text/javascript">
            let b0=document.getElementById("ip0"), b1=document.getElementById("ip1"), b2=document.getElementById("ip2"), ans=eval(b0.innerHTML+b1.innerHTML*2+b2.innerHTML*4);
            b0.onclick=function(){
                b0.innerHTML=eval("1-"+b0.innerHTML);
                document.getElementById("op"+ans).innerHTML=0;
                ans+=b0.innerHTML*2-1;
                document.getElementById("op"+ans).innerHTML=1;
            }
            b1.onclick=function(){
                b1.innerHTML=eval("1-"+b1.innerHTML);  
                document.getElementById("op"+ans).innerHTML=0;
                ans+=b1.innerHTML*4-2;
                document.getElementById("op"+ans).innerHTML=1;
            }
            b2.onclick=function(){
                b2.innerHTML=eval("1-"+b2.innerHTML);
                document.getElementById("op"+ans).innerHTML=0;
                ans+=b2.innerHTML*8-4;
                document.getElementById("op"+ans).innerHTML=1;  
            }
        </script>
    </body>
</html>